<template>
  <div class="wrap" v-loading="loading">
    <div class="content">
      <div class="season">
        <h3>商品信息：</h3>
        <el-card>
          <div class="goods-content">
            <div class="left">
              <div class="img-box">
                <img src="https://oss-cdn.minodm.com/uploads/1274573737/1274700260/goods/MCO1286018949.jpeg" alt="">
              </div>
            </div>
            <div class="right">
              <div class="goods-card">
                <p class="font-bold">用户名（店铺名）</p>
                <p class="font-bold">MLM5567788889</p>
                <p class="hidden-1 font-grey goods-title">商品标题、Listing标题、1行，鼠标移入显示全部</p>
                <p class="font-bold">SKU：MHH-067-1</p>
                <p class="font-grey">Color: Black | Size: S</p>
                <div class="operate">
                  <el-tooltip class="item" effect="dark" content="添加适用SKU" placement="top">
                    <img src="@/assets/images/stock-add.png" alt="" @click="addStock">
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="删除适用SKU" placement="top">
                    <img src="@/assets/images/stock-del.png" alt="" @click="delStock">
                  </el-tooltip>


                </div>
              </div>


            </div>
          </div>
        </el-card>
      </div>
    </div>


    <div class="footer" style="margin-top: 30px">
      <el-button type="info" @click="goBack">返回</el-button>
    </div>


    <el-dialog
      title="确认删除该适用的SKU？"
      :visible.sync="delDialog"
      width="500px"
    >
      <div>
        <div>店铺名</div>
        <div class="dialog-goods">
          <div class="goods-img">
            <img :src="goodsImg" alt="">
          </div>
          <div class="goods-title">
            <p class="hidden-1">商品标题、1行、鼠标移入显示完整商品标题、1行、鼠标移入显示完整商品标题、1行、鼠标移入显示完整商品标题、1行、鼠标移入显示完整商品标题、1行、鼠标移入显示完整商品标题、1行、鼠标移入显示完整商品标题、1行、鼠标移入显示完整</p>
            <p>Listing ID      SKU</p>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delDialog = false">取 消</el-button>
        <el-button type="primary" @click="delDialog = false">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      class="select-goods-dialog"
      title="添加其他适用的SKU"
      :visible.sync="addDialog"
    >
      <div >
        <div class="select-goods">
          当前选择的商品
          <el-table
            ref="selectGoods"
            :data="[]"
            :border="true"
            row-key="id"
            class="goods-table"
          >
            <el-table-column
              prop="image"
              label="商品"
              align="left"
              width="120"
            >
              <template slot-scope="{row}">
                <img :src="row.image" alt="" width="70" style="margin-left: 20px">
              </template>
            </el-table-column>
            <el-table-column
              prop="title"
              label="标题"
              align="left"
              min-width="250"
            >
              <template slot-scope="{row}">
                <el-tooltip class="item" effect="dark" :content="row.title" placement="top">
                  <div class="hidden-2">
                    {{row.title}}
                  </div>
                </el-tooltip>
                <!-- 如果是变体则直接显示对应的属性 -->
                <template v-if="row.attributes">
                  <div class="goods-SKU-info">
                <span
                  v-for="attr in row.attributes"
                  :key="attr.name"
                  class="attr"
                >
                  {{attr.name}} : {{attr.value}}
                  <span class="attr-link"> | </span>
                </span>
                  </div>
                </template>

              </template>
            </el-table-column>
            <el-table-column
              label="Listing ID与SKU"
              align="center"
              min-width="150"
            >
              <template slot-scope="{row}">
                <div>{{row.goodsId}} {{row.sku ? `(${row.sku})` : ''}}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              min-width="100"
            >
              <template slot-scope="{row}">
                <diy-link @click="removeSelect(row)" v-if="selectGoods.length > 1">移除</diy-link>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <p>同一商品可能用于多个不同的站点，请通过搜索该商品在其他站点的Listing ID 或 SKU ，勾选后完成绑定</p>

        <div style="margin: 10px 0;">
          <el-input size="small" style="width: 200px"  placeholder="搜索 listing或sku"></el-input>
          <el-button size="small" type="primary">搜索</el-button>
        </div>
        <el-table
          ref="goodsTable"
          :data="[]"
          :border="true"
          row-key="id"
          :tree-props="{children: 'goodsVariation'}"
          class="goods-table"
          default-expand-all
        >
          <el-table-column
            prop="image"
            label="商品"
            align="left"
            width="120"
          >
            <template slot-scope="{row}">
              <img :src="row.image" alt="" width="70" style="margin-left: 20px">
            </template>
          </el-table-column>
          <el-table-column
            prop="title"
            label="标题"
            align="left"
            min-width="250"
          >
            <template slot-scope="{row}">
              <!-- 如果是变体则直接显示对应的属性 -->
              <template v-if="row.variationId">
                <div class="goods-SKU-info">
                <span
                  v-for="attr in row.attributes"
                  :key="attr.name"
                  class="attr"
                >
                  {{attr.name}} : {{attr.value}}
                  <span class="attr-link"> | </span>
                </span>
                </div>


              </template>
              <template v-else>
                <el-tooltip class="item" effect="dark" :content="row.title" placement="top">
                  <div class="hidden-2">
                    {{row.title}}
                  </div>
                </el-tooltip>
              </template>

            </template>
          </el-table-column>
          <el-table-column
            label="Listing ID与SKU"
            align="center"
            min-width="150"
          >
            <template slot-scope="{row}">
              <div>{{row.goodsId}} {{row.sku ? `(${row.sku})` : ''}}</div>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            min-width="100"
          >
            <template slot-scope="{row}">
              <el-link :underline="false" @click="addSelectGoods(row)" :disabled="disAbleAdd(row)" v-if="!row.isVariation">添加</el-link>
            </template>
          </el-table-column>
        </el-table>
        <div class="footer">
          <el-button @click="addDialog = false">取消</el-button>
          <el-button @click="addDialog = false" type="primary">确认</el-button>
        </div>

      </div>
    </el-dialog>

  </div>
</template>

<script>
import {getStockOrder} from "@/api/stock";
import {deepCopy} from "@/utils";
import DeliverTag from "@/components/Tag/DeliverTag.vue";
import Order1688Tag from "@/components/Tag/Order1688Tag.vue";
import StockExpressDialog from "@/views/stock/components/stockExpressDialog";

export default {
  name: "editStock",
  components: {

  },
  data(){
    return {
      loading: false,
      data: [],
      goodsImg: 'https://oss-cdn.minodm.com/uploads/1274573737/1274700260/goods/MCO1286018949.jpeg',
      delDialog: false,
      addDialog: false,
    }
  },
  created() {

  },
  methods:{
    getData(){
      this.loading = true

    },
    // 返回上一页
    goBack(){
      this.$router.go(-1);
    },
    addStock(){
      this.addDialog = true
    },
    delStock(){
      this.delDialog = true;
    },
    // 校验是否能够入库
    checkStock(){
      this.$alert(
        '<span style="color: #FF0000">如若实际入库数量与预计入库数量有差异，请先与用户沟通确认</span>',
        '确认入库？',
        {
          dangerouslyUseHTMLString:true,
          type:'warning',
          showCancelButton:true,
        }
      )
        .then(res=>{
          // 确认入库
          this.confirmOrder()
        })
        .catch(res=>{

        })
    },
    // 确认入库
    confirmOrder(){

    },
    //
    showStockDialog(){
      this.stockExpressForm.stockId = this.data.id;
      this.stockExpressForm.express = deepCopy(this.data.express);

      this.stockExpressDialog = true
    },
  }
}
</script>

<style scoped lang="scss">
.wrap {
  padding: 30px 30px;
  .header{
    display: flex;
    justify-content: space-between;
  }
  .content{
    padding: 20px 0 0;
  }
  .header-card{
    font-size: 14px;
    background-color: rgba(242, 242, 242, 1);
    p{
      margin: 10px 0;
      padding: 0;
    }
    .font-bold{
      font-weight: bold;
    }
    .true-number{
      color: #FF0000;
      font-weight: 600;
    }
  }
}

.goods-content{
  display: flex;
  .left{
    margin-right: 20px;
    .img-box{
      width: 100px;
      height: 100px;
      border-radius: 5px;
      background-color: #cccccc;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      img{
        width: 90px;
        height: 90px;
      }
    }
  }
  .right{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    .goods-card{
      position: relative;
      width: 350px;
      height: 100px;
      margin-right: 20px;
      margin-bottom: 20px;
      border: 1px solid #cccccc;
      font-size: 14px;
      padding: 5px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      p{
        margin: 0;
        padding: 0;
      }

      .font-bold{
        font-weight: 600;
        color: #555555;
      }
      .goods-title{
        font-weight: 500;

      }
      .operate{
        display: none;
        position: absolute;
        right: 5px;
        top: 5px;
        img{
          cursor: pointer;
          width: 16px;
          margin: 0 5px;
        }
      }

    }
    .goods-card:hover{
      .operate{
        display: block;
      }
    }
  }
}
.dialog-goods{
  display: flex;
  .goods-img{
    width: 50px;
    height: 50px;
    margin-right: 20px;
    border: 1px solid #cccccc;
    img{
      width: 48px;
      height: 48px;
    }
  }
  .goods-title{
    line-height: 25px;
    p{
      margin: 0;
      padding: 0;
    }
  }
}
</style>
